<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>告警规则设置</title>
    <meta name="decorator" content="nblank"/>
</head>
<body>
<div class="content container">
    <h2 class="page-title">告警规则设置
        <small>告警规则${not empty param.id?'修改':'添加'}</small>
    </h2>
    <section class="widget widget-tabs widget-table-overflow ">
        <header>
            <ul class="nav nav-tabs">
                <li><a href="${ctx}/biz/eiwRule?officeId=${officebiz.id}">${officebiz.name}设备列表</a></li>
                <li><a href="${ctx}/biz/eiwRule/list?officeId=${officebiz.id}&sgroupId=${sgroup.id}&itemId=${eitem.id}">${officebiz.name}告警规则设置</a></li>
                <li class="active"><a href="javascript:;">${officebiz.name}设备告警规则${not empty param.id?'修改':'添加'}</a></li>
            </ul>
        </header>
        <div class="body tab-content">
            <form:form id="inputForm" modelAttribute="equipmentItemWarningRule" action="${ctx}/biz/eiwRule/save" method="post"
                       class="form-horizontal">
                <form:hidden path="id"/>
                <form:hidden path="sgroupId" value="${sgroup.id}"/>
                <form:hidden path="itemId" value="${eitem.id}"/>
                <div class="form-group">
                    <label class="control-label col-sm-4"><span class="help-inline"><span style="color:red;">*</span></span>
                        参数:</label>
                    <div class="col-sm-4">
                        <form:select path="param.id" data-width="auto" data-style="btn-primary"
                                     class="selectpicker">
                            <form:option value="" label="请选择" />
                            <form:options items="${paramList}" itemValue="id" itemLabel="name" />
                        </form:select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4"><span class="help-inline"><span style="color:red;">*</span></span>
                        比较运算符1:</label>
                    <div class="col-sm-4">
                        <form:select path="comparisonOperator1" data-width="auto" data-style="btn-primary"
                                     class="selectpicker">
                            <form:option value="" label="请选择"/>
                            <form:options items="${fns:getDictList('comparison_operator')}" itemValue="value"
                                          itemLabel="label"/>
                        </form:select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4"><span class="help-inline"><span style="color:red;">*</span></span>
                        操作数1:</label>
                    <div class="col-sm-2">
                        <form:input path="operand1" htmlEscape="false" maxlength="50"
                                    class="form-control input-transparent"/>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-4"><span class="help-inline"></span> 关系运算符:</label>
                    <div class="col-sm-4">
                        <form:select path="relationOperator" data-width="auto" data-style="btn-primary"
                                     class="selectpicker">
                            <form:option value="" label="增加条件"/>
                            <form:options items="${fns:getDictList('relation_operator')}" itemValue="value"
                                          itemLabel="label"/>
                        </form:select>
                    </div>
                </div>

                <div class="form-group" name="conditionTwo">
                    <label class="control-label col-sm-4"><span class="help-inline"><span style="color:red;">*</span>比较运算符2:</span></label>
                    <div class="col-sm-4">
                        <form:select path="comparisonOperator2" data-width="auto" data-style="btn-primary"
                                     class="selectpicker">
                            <form:option value="" label="请选择"/>
                            <form:options items="${fns:getDictList('comparison_operator')}" itemValue="value"
                                          itemLabel="label"/>
                        </form:select>
                    </div>
                </div>
                <div class="form-group" name="conditionTwo">
                    <label class="control-label col-sm-4"><span class="help-inline"><span style="color:red;">*</span>操作数2:</span> </label>
                    <div class="col-sm-2">
                        <form:input path="operand2" htmlEscape="false" maxlength="50"
                                    class="form-control input-transparent"/>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-4"><span class="help-inline"></span> 是否添加时间条件:</label>
                    <div class="col-sm-4">
                        <form:select path="createBy" data-width="auto" data-style="btn-primary"
                                     class="selectpicker">
                            <form:option value="0" label="否"/>
                            <form:option value="1" label="是"/>
                        </form:select>
                    </div>
                </div>

                <div class="form-group" name="startEndTime">
                    <label class="control-label col-md-4">起止时间:</label>
                    <div class="col-sm-5 col-md-5 form-inline">
                        <div class="row">
                            <div class="input-group date col-sm-5 timeb1" data-date="1970-01-01 00:00" data-link-field="stime1">
                                <form:input path="timeBegin" htmlEscape="false" maxlength="50" readonly="true" size="16" class="form-control input-transparent"/>
                                <div class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></div>
                                <div class="input-group-addon"><span class="glyphicon glyphicon-time"></span></div>
                            </div>
                            <span>-</span>
                            <div class="input-group date col-sm-5 timee1" data-date="1970-01-01 00:00" data-link-field="etime1">
                                <form:input path="timeEnd" htmlEscape="false" maxlength="50" readonly="true" size="16" class="form-control input-transparent"/>
                                <div class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></div>
                                <div class="input-group-addon"><span class="glyphicon glyphicon-time"></span></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-4"><span class="help-inline"><span style="color:red;">*</span></span>
                        级别:</label>
                    <div class="col-sm-4">
                        <form:select path="warnLevel" data-width="auto" data-style="btn-primary" class="selectpicker">
                            <form:option value="" label="请选择"/>
                            <form:options items="${fns:getDictList('event_level')}" itemValue="value"
                                          itemLabel="label"/>
                        </form:select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-4"><span class="help-inline"><span style="color:red;">*</span></span>
                        描述:</label>
                    <div class="col-sm-4">
                        <form:textarea path="remarks" htmlEscape="false" rows="3" maxlength="200"
                                       class="form-control input-transparent"/>
                    </div>
                </div>
                <div class="form-actions">
                    <div class="text-align-center">
                        <input id="btnCancel" class="btn btn-default" type="button"
                               style="margin-left: -50px;min-width:100px;" value="返 回" onClick="history.go(-1)"/>
                        <input id="btnSubmit" class="btn btn-primary" style="margin-left:50px;min-width:100px;"
                               type="submit" value="保 存"/>&nbsp;
                    </div>
                </div>
            </form:form>
        </div>
    </section>
</div>
<script type="text/javascript">
    $(function () {
        var id = $("#id").val();
        if(id!=null && id!=''){//本页面为 修改 页面
            if($('#relationOperator').val()==''){//只有一个条件，则隐藏第二个条件控件
                $("div[name='conditionTwo']").hide();
                $('#comparisonOperator2').attr("disabled",true);
                $('#operand2').attr("disabled",true);
            }
            if($('#timeBegin').val()=='' && $('#timeEnd').val()==''){//时间限制部分
                $("div[name='startEndTime']").hide();
                $('#timeBegin').attr("disabled",true);
                $('#timeEnd').attr("disabled",true);
            }
        }else{//本页面为 新增 页面
            //第二个条件设置部分
            $("div[name='conditionTwo']").hide();
            $('#comparisonOperator2').attr("disabled",true);
            $('#operand2').attr("disabled",true);
            $("div[name='conditionTwo']").hide();
            $('#comparisonOperator2').attr("disabled",true);
            $('#operand2').attr("disabled",true);
            //时间限制设备部分
            $("div[name='startEndTime']").hide();
            $('#timeBegin').attr("disabled",true);
            $('#timeEnd').attr("disabled",true);

//            console.info("");
        }

        $('#relationOperator').on('changed.bs.select', function () {
            if($('#relationOperator').val()!=''){//已经选择关系
                $("div[name='conditionTwo']").show();
                $('#comparisonOperator2').removeAttr("disabled");
                $('#comparisonOperator2').selectpicker('refresh');
                $('#operand2').attr("disabled",false);
            }else{//未选择关系
                $("div[name='conditionTwo']").hide();
                $('#comparisonOperator2').attr("disabled",true);
                $('#comparisonOperator2').selectpicker('refresh');
                $('#operand2').attr("disabled",true);
            }
        });
        $('#createBy').on('changed.bs.select', function (e) {
            if($('#createBy').val()!='0'){//需要时间条件
                $("div[name='startEndTime']").show();
                $('#timeBegin').attr("disabled",false);
                $('#timeEnd').attr("disabled",false);
            }else{//不要时间条件
                $("div[name='startEndTime']").hide();
                $('#timeBegin').attr("disabled",true);
                $('#timeEnd').attr("disabled",true);
            }
        });
        $("#inputForm").validate({
            ignore: "",
            focusInvalid:true,
            rules: {
                "param.id": {
                    required: true
                },
                comparisonOperator1: {
                    required: true
                },
                operand1: {
                    required: true,
                    number:true,
                    maxlength:10
                },
                comparisonOperator2: {
                    required: true
                },
                operand2: {
                    required: true,
                    number:true,
                    maxlength:10
                },
//                timeBegin: {
//                    required: true
//                },
//                timeEnd: {
//                    required: true
//                },
                warnLevel: {
                    required: true
                },
                remarks: {
                    required: true
                }
            },
            messages: {
                "param.id": {
                    required: "必选信息"
                },
                comparisonOperator1: {
                    required: "必选信息"
                },
                comparisonOperator2: {
                    required: "必选信息"
                },
                warnLevel: {
                    required: "必选信息"
                },
                operand1: {
                    required: "必填信息",
                    number:"必须是数字",
                    maxlength:"位数必须小于等于10(含小数点位)"
                },
                operand2: {
                    required: "必填信息",
                    number:"必须是数字",
                    maxlength:"位数必须小于等于10(含小数点位)"
                },
                remarks: {
                    required: "必填信息"
                }

            },
            submitHandler: function (form) {
                $(form).find(":submit").attr("value","提交中...");
                $(form).ajaxSubmit({
                    success:function (result) {
                        Messenger().post("操作成功!");
                        pxTrigDlg("${ctx}/biz/eiwRule/list?officeId=${officebiz.id}&sgroupId=${sgroup.id}&itemId=${eitem.id}");
                    }
                });
            },
            errorPlacement:function (error, element) {
                error.appendTo(element.parent());
            }
        });
    });
</script>
<script type="text/javascript" src="${ctxStatic}/datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="${ctxStatic}/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    var endTimeValue = "";
    var timeb1 =  $('.timeb1').datetimepicker({
        autoclose:true,
        format: "hh:ii",
        language:  'zh-CN',
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 0,
        startDate: "1970-01-01 00:00",
        endDate: "1970-01-01 23:59",
        linkFormat: "yyyy-mm-dd hh:ii:ss"
    }).on('changeDate', function(e){
        if(typeof(e.date) != "undefined") {
            timee1.datetimepicker("setStartDate",e.date);
        }else{
            timee1.datetimepicker("setStartDate","1970-01-01 00:00");
        }
    });
    var timee1 =  $('.timee1').datetimepicker({
        autoclose:true,
        format: "hh:ii",
        language:  'zh-CN',
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 0,
        startDate: "1970-01-01 00:00",
        endDate: "1970-01-01 23:59",
        linkFormat: "yyyy-mm-dd hh:ii:ss"
    }).on('changeDate', function(e){
        if(typeof(e.date) != "undefined") {
            timeb1.datetimepicker("setEndDate", e.date);
        }else{
            timeb1.datetimepicker("setEndDate", "1970-01-01 23:59");
        }
    });
</script>
</body>
</html>